<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<style>
		*{
		margin: 0;
		padding:0;
		}
		img{
			vertical-align: bottom;
		}
		a{
			text-decoration: none;
		}
		li{
			list-style:none;
		}
		.clearfix::before,.clearfix::after{
			content:"";
			display:table;
		}
		.clearfix::after{
			clear:both;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		.w{
			width: 1280px;
			margin:0 auto;
		}
		.bd{
			border: 1px solid red;
		}
		.bg{
		background: url(images/images/bg1_02.jpg);	
		}
		header{
			height: 824px;
			background:url(images/oshin-slide-1.jpg) no-repeat;
			background-size: 1280px 824px;
			padding-top: 25px;
			padding-left: 28px;
		}
		.logo{
			background:url(images/oshin-black-logo.png) no-repeat;
			width: 118px;
			height: 50px;
			margin-right: 47px;
			transition: all 2s;
			
		}
		.logo:hover{
			transform: scale(1.2);
		}
		.navigation li{
			margin-right: 43px;
			padding-top: 20px;
		}
		.navigation li>a{
			font-size: 9px;
			color: #333333;
			letter-spacing:2px;
			font-weight:800;
			
		}
		.navigation li a:hover{
			color: #e3b467;
		}
		.f1{
			margin: 0 22px 0 34px;
			padding-top: 20px;
		}
		.f2{
			padding-top: 20px;
		}
		.main{
			width: 365px;
			height: 254px;
			margin-top: 270px;
			padding-left: 390px;
			position: relative;
			animation:myfirst 2s;
			top:-275px;
			animation-fill-mode:forwards;
		}
		@keyframes myfirst{
			from{left:0px;top:-275px;}
			to{left:0px; top:0px;}
		} 
		.main div:nth-child(1){
			padding-left: 50px;
		}
		.main div:nth-child(1) h5{
			font-size: 14px;
			color: #222222;
			word-spacing:18px;
			letter-spacing:8px;
		}
		.main div:nth-child(2){
			border: 7px solid #000000;
			width: 350px;
			height: 102px;
			text-align: center;
			margin: 33px 0 45px 0;
		}
		.main div:nth-child(2) h3{
			font-size: 35px;
			color: #000000;
			line-height: 102px;
		}
		.main div:nth-child(3){
			padding-left: 88px;
		}
		.main div:nth-child(3)h5{
			font-size: 20px;
			color: #222222;
		}
		</style>
	</head>
	<body>
		<div class="bg">
		<header class="w">
			
			<div class="navigation">
				<div class="logo fl"></div>
				<ul class="navigat fl">
					<li class="fl"><a href="" class="fl">Home</a></li>
					<li class="fl"><a href="" class="fl">Pages</a></li>
					<li class="fl"><a href="" class="fl">Portfolio</a></li>
					<li class="fl"><a href="" class="fl">SINGLE PORTFOLIO</a></li>
					<li class="fl"><a href="" class="fl">Headers</a></li>
					<li class="fl"><a href="" class="fl">Journal</a></li>
					<li class="fl"><a href="" class="fl">Shop</a></li>
					<li class="fl"><a href="" class="fl">Shortcodes</a></li>
				</ul>
				<div class="f1 fl"><a href=""><span class="fa fa-search fl"style="font-size:15px;color:#333333;"></span></a></div>
				<div class="f2 fl"><a href=""><span class="fa fa-bars fl"style="font-size:15px;color:#333333;"></span></a></div>
			</div>
			<div class="main">
				<div>
					<h5>MAKING THE WEB</h5>
				</div>
				<div>
					<h3>STYLISH</h3>
				</div>
				<div>
					<h5>The Best or Nothing</h5>
				</div>
			</div>
			
		</header>
		</div>
	</body>
</html>
